<template>
	<view class="pages">
		<!-- <view class="tabs" v-if="roles.includes('admin') || roles.includes('carAdmin')">
			<view class="tab font-14 font-weight-700" :class="type == 1 ? 'checkTab' : ''" @click="tabChange(1)">
				行程列表
			</view>
			<view class="tab font-14 font-weight-700" :class="type == 2 ? 'checkTab' : ''" @click="tabChange(2)">
				约车申请
			</view>
		</view> -->
		<!-- <view :class="[roles.includes('admin') || roles.includes('carAdmin') ? 'margin-top-sm' : '']"> -->
		<MakeList ref="MakeList" :type="type" :isPin="false" :isEdit="true"></MakeList>
		<MyTabBar active="home"></MyTabBar>
	</view>
</template>

<script>
	import MakeList from "@/components/MakeList/MakeList.vue"
	import MyTabBar from "@/components/MyTabBar/MyTabBar.vue"
	import storage from '@/utils/storage'
	export default {
		components: {
			MakeList,
			MyTabBar
		},
		data() {
			return {
				type: 1,
			}
		},
		computed: {
			roles(){ // 用户角色
				return storage.get('vuex_roles');
			},
		},
		onLoad(options) {
			if(options.type){
				this.type = parseInt(options.type);
			}else {
				this.type = this.roles.includes('admin') || this.roles.includes('carAdmin') || this.roles.includes('driver') ? 1 : 2;
			}
			
			console.log('type' , this.type);
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			this.$refs.MakeList.init();
			
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		/**
		 * 上拉加载
		 */
		onReachBottom(){
			console.log('页面到底了');
			this.$refs.MakeList.getLastPageData();
		},
		methods: {
			tabChange(e) {
				this.type = e;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexCenter {
		display: flex;
		align-items: center;
	}

	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}

	.tabs {
		@extend .flexCenterBetween;
		background-color: #FFFFFF;
		position: sticky;
		top: 0px;
		z-index: 99;

		.tab {
			flex: 5;
			text-align: center;
			line-height: 100upx;
		}

		.checkTab {
			color: #1778FC;
			position: relative;

			&:after {
				content: '';
				width: 20%;
				height: 1px;
				background-color: #1778FC;
				position: absolute;
				left: 40%;
				bottom: 0px;
			}
		}
	}
</style>